import React, { useState } from 'react';
import { Dropdown, Badge, Drawer, Popover } from 'antd';
import Icon from '/@/components/icon';
import type { MenuProps } from 'antd';
import styles from '../../index.module.scss';
import screenfull from 'screenfull';
import LayoutConfig from './LayoutSetings';
import { t } from 'i18next';
import { useStateThemeConfig, useDispatchTheme } from '/@/store/hooks/theme';
import { useDispatchMenu } from '/@/store/hooks/menu';
import { useTranslation } from 'react-i18next';
import { useDispatchUser } from '/@/store/hooks/user';
import { useNavigate } from 'react-router-dom';
export default function NavUser() {
  const navigate = useNavigate();
  const ThemeConfig = useStateThemeConfig();
  const dispatch = useDispatchTheme();
  const { stateSetBackRoute } = useDispatchMenu();
  const { stateSetToken } = useDispatchUser();
  const { i18n } = useTranslation();
  //设置布局状态定义
  const [open, setOpen] = useState(false);
  //打开布局抽屉事件
  const onOpenClose = () => {
    setOpen((open) => !open);
  };
  //全屏状态
  const [Fullscreen, setFullscreen] = useState(false);
  //全屏事件
  const fullScreen = () => {
    screenfull.toggle();
    setFullscreen((Fullscreen) => !Fullscreen);
  };
  const FontSizeItems: MenuProps['items'] = [
    {
      key: 'large',
      label: <span>{t('layout.fontsize.large')}</span>,
    },
    {
      key: 'default',
      label: <span>{t('layout.fontsize.default')}</span>,
    },
    {
      key: 'small',
      label: <span>{t('layout.fontsize.small')}</span>,
    },
  ];
  const I18nItems: MenuProps['items'] = [
    {
      key: 'ZH_CN',
      label: <span>简体中文</span>,
    },
    {
      key: 'EN_US',
      label: <span>English</span>,
    },
    {
      key: 'ZH_TW',
      label: <span>繁體中文</span>,
    },
  ];
  const UserItems: MenuProps['items'] = [
    {
      key: 'git',
      icon: <Icon icon='LinkOutlined'></Icon>,
      label: <span>{t('layout.user.code')}</span>,
    },
    {
      key: 'personal',
      icon: <Icon icon='UserOutlined'></Icon>,
      label: <span>{t('layout.user.personal')}</span>,
    },
    {
      type: 'divider',
    },
    {
      key: 'logOut',
      icon: <Icon icon='LoginOutlined'></Icon>,
      label: <span>{t('layout.user.loginout')}</span>,
    },
  ];

  //退出登录
  const Signout = () => {
    //调用接口退出
    navigate('/login');
    stateSetToken('');
    stateSetBackRoute([]);
  };
  //个人设置
  const Personalsettings = () => {};
  return (
    <>
      <Dropdown
        menu={{ items: FontSizeItems, selectable: true, defaultSelectedKeys: ['large'] }}
        placement='bottom'
        arrow={{ pointAtCenter: true }}
        trigger={['click']}
      >
        <div className={styles['layout_navbars_user_item']}>
          <Icon icon='FontSizeOutlined'></Icon>
        </div>
      </Dropdown>
      <Dropdown
        menu={{
          items: I18nItems,
          selectable: true,
          defaultSelectedKeys: [ThemeConfig.language],
          onClick: ({ key }) => {
            i18n.changeLanguage(key);
            dispatch.stateSetThemeConfig('setthemeConfig', { language: key });
          },
        }}
        placement='bottom'
        arrow={{ pointAtCenter: true }}
        trigger={['click']}
      >
        <div className={styles['layout_navbars_user_item']}>
          <Icon icon='DribbbleOutlined'></Icon>
        </div>
      </Dropdown>
      <div className={styles['layout_navbars_user_item']} onClick={onOpenClose}>
        <Icon icon='SkinOutlined'></Icon>
      </div>
      <Popover
        placement='bottomLeft'
        title='通知'
        content={
          <div style={{ width: '300px' }}>
            <p>开发中...</p>
          </div>
        }
        trigger='click'
      >
        <div className={styles['layout_navbars_user_item']}>
          <Badge dot>
            <Icon icon='BellOutlined'></Icon>
          </Badge>
        </div>
      </Popover>
      <div className={styles['layout_navbars_user_item']} onClick={fullScreen}>
        {Fullscreen ? <Icon icon='FullscreenExitOutlined'></Icon> : <Icon icon='FullscreenOutlined'></Icon>}
      </div>
      <Dropdown
        menu={{
          items: UserItems,
          onClick: ({ key }) => {
            switch (key) {
              case 'logOut':
                Signout();
                break;
              case 'personal':
                Personalsettings();
                break;
            }
          },
        }}
        placement='bottom'
        arrow={{ pointAtCenter: true }}
      >
        <div style={{ marginLeft: '10px', color: 'var(--squidwest-color-fontsizecolor)' }}>
          <img
            src='https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500'
            alt='头像'
            style={{ width: '25px', height: '25px', borderRadius: '100%', marginRight: '5px' }}
          />
          admin
          <Icon icon='DownOutlined' style={{ marginLeft: '5px' }}></Icon>
        </div>
      </Dropdown>
      {/* 布局配置抽屉 */}
      <Drawer
        title={t('layoutconfiguration')}
        placement='right'
        onClose={onOpenClose}
        width='280px'
        open={open}
        closable={false}
      >
        <LayoutConfig onOpenClose={onOpenClose} />
      </Drawer>
    </>
  );
}
